<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<div class="leftMenu">
    <div class="menuBox">
        <div class="slideItem">
            <p class="slideItemTitle">搜索</p>
            <div class="slideItemContent" style="position: relative;">
                <form action="${pageContext.request.contextPath}/index.jspx" type="post">
                    <input type="search"  name="title" style="width:100%;border: #ccc 1px solid;padding:3px 45px 3px 5px;" value="" placeholder="Search..." />
                    <button type="submit" style="position: absolute;right: 0;top: 0;height: 100%;cursor: pointer; border: #ccc 1px solid;background:#f9f9f9;">搜索</button>
                </form>
            </div>
        </div>
        <div class="slideItem">
            <p class="slideItemTitle" style="position: relative;overflow: hidden;">音乐 - <span id="musicLabel" style="color: #999;font-weight: normal;font-size: 12px;display: inline-block;vertical-align: middle;"></span><a href="javascript:;" style="vertical-align: middle; position: relative;top: 2px; font-weight: normal; font-size: 12px;color: #666;display: inline-block;float: right;" onclick="randomBGM()">切歌</a></p>
            <div class="slideItemContent musicBox">
                <audio id="bgmAudio" controls="controls" style="width: 236px;" autoplay>
                    <source src="" type="audio/mpeg" />
                    Your browser does not support the audio element.bgmObject
                </audio>
            </div>
        </div>
        <div class="slideItem">
            <p class="slideItemTitle">日历</p>
            <div class="slideItemContent datapicker" style="overflow: hidden"><input type="hidden" readonly style="width: 200px" name="birthday" id="birthday" class="form-control" value=""/> </div>
            <style>
                .daterangepicker table th{font-weight: normal;font-size: 85%;}
            </style>
        </div>
        <div class="slideItem">
            <p class="slideItemTitle">分类</p>
            <div class="slideItemContent">
            <ul style="padding: 0 10px;">
                    <c:forEach var ="listMap" items="${requestScope.listMap}" varStatus="stat" >
                        <li style="list-style: inside; list-style-image:url('${pageContext.request.contextPath}/img/arrow.gif');padding: 5px 0;"><a style="color: #666;padding: 5px 0;" href="${pageContext.request.contextPath}/index.jspx?classifyId=${listMap.classifyId}" target="_self" title="${listMap.classifyName}">${listMap.classifyName}(${listMap.articleCount})</a></li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="slideItem">
            <p class="slideItemTitle">随机文章</p>
            <div class="slideItemContent">
            <ul style="padding: 0 10px;">
                    <c:forEach var ="article" items="${requestScope.articles}" varStatus="stat" >
                        <li style="list-style: inside; list-style-image:url('${pageContext.request.contextPath}/img/arrow.gif');padding: 5px 0;"><a style="color: #666;padding: 5px 0;" href="${pageContext.request.contextPath}/article/show.jspx?id=${article.sysid}" target="_self" title="${article.title}">${article.title}</a></li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="slideItem">
            <p class="slideItemTitle">评论列表</p>
            <div class="slideItemContent">
            <ul style="padding: 0 10px;">
                    <c:forEach var ="commentListMap" items="${requestScope.commentListMap}" varStatus="stat" >
                        <li style="list-style: inside; list-style-image:url('${pageContext.request.contextPath}/img/arrow.gif');padding: 5px 0;"><a style="color: #666;padding: 5px 0;" href="${pageContext.request.contextPath}/article/show.jspx?id=${commentListMap.articleId}#${commentListMap.commentId}" target="_self" title="${commentListMap.articleTitle}">${commentListMap.commentContent}</a></li>
                    </c:forEach>
                </ul>
            </div>
        </div>

        <div class="slideItem">
            <p class="slideItemTitle">友情链接</p>
            <div class="slideItemContent">
                <ul style="padding: 0 10px;">
                    <c:forEach var ="links" items="${requestScope.friendlinks}" varStatus="stat" >
                        <li style="list-style: inside; list-style-image:url('${pageContext.request.contextPath}/img/arrow.gif');padding: 5px 0;"><a style="color: #666;padding: 5px 0;" href="${links.weburl}" target="_blank" title="${links.remark}">${links.nickname}</a></li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</div>


